/***
 *  ref http://blog.csdn.net/wei_shining/article/details/52344263
 */
// import '../../libs/ueditor/themes/default/css/ueditor.css';
import '../../libs/ueditor/ueditor.config';
import '../../libs/ueditor/ueditor.all';
import cookie from 'react-cookie';
import config from '../../libs/config';

// export default _.extend({}, (cookie.load(config.cookie_lang) == 'en' ? en : cn));
if (cookie.load(config.cookie_lang) == 'en') {
    require('../../libs/ueditor/lang/en/en');
} else {
    require('../../libs/ueditor/lang/zh-cn/zh-cn');
}


var Ueditor = React.createClass({
    getDefaultProps() {
        return {
            onchange: function (content) {

            },
            disabled: false
        };
    },
    componentWillUnmount(){
        this.editor && this.editor.destroy();
    },
    componentDidMount(){
        // require.ensure(['./../libs/ueditor/ueditor.config', './../libs/ueditor/ueditor.all', './../libs/ueditor/lang/zh-cn/zh-cn'], function () {
        const self = this;

        self.editor = UE.getEditor(this.props.id, {
            //工具栏
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
                '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload',
                'horizontal', 'date', 'time',
            ]]
            , lang: "zh-cn"
            //字体
            , 'fontfamily': [
                {label: '', name: 'songti', val: '宋体,SimSun'},
                {label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
                {label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
                {label: '', name: 'heiti', val: '黑体, SimHei'},
                {label: '', name: 'lishu', val: '隶书, SimLi'},
                {label: '', name: 'andaleMono', val: 'andale mono'},
                {label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
                {label: '', name: 'arialBlack', val: 'arial black,avant garde'},
                {label: '', name: 'comicSansMs', val: 'comic sans ms'},
                {label: '', name: 'impact', val: 'impact,chicago'},
                {label: '', name: 'timesNewRoman', val: 'times new roman'}
            ]
            //字号
            , 'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36]
            , enableAutoSave: false
            , autoHeightEnabled: false
            , initialFrameHeight: this.props.height
            , initialFrameWidth: '100%'
            , readonly: this.props.disabled
        });
        self.editor.ready(function (ueditor) {
            var value = self.props.value ? self.props.value : '<p></p>';
            console.log(value);
            self.editor.setContent(value);
        });

        self.editor.addListener('contentChange', function (editor_) {
            self.props.onchange(this.getContent())
        });
    },
    render: function () {
        return (
            <script id={this.props.id} name="content" type="text/plain">
            </script>
        )
    }
});
export default Ueditor;